import React, {PureComponent} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {
  ImageBackground,
  Text,
  View,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Image,
} from 'react-native';
import {BASE_API} from '../../../config';
import {CachedImage} from 'react-native-img-cache';

export default class RoomCell extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const {item, onPressItem} = this.props || {};
    const {name, channelId, users, speakerAmount, userAmount, owner, paid} =
      item.item || {};

    console.log('+++++');
    console.log(item);

    return (
      <TouchableWithoutFeedback
        {...this.props}
        onPress={onPressItem}
        key={channelId}>
        <View
          style={{
            paddingTop: 8,
            paddingLeft: 20,
            paddingRight: 20,
            paddingBottom: 0,
            position: 'relative',
          }}>
          <LinearGradient
            start={{x: 0, y: 1}}
            end={{x: 1, y: 1}}
            colors={['#CE18EC', '#6601F5']}
            style={{
              borderRadius: 18,
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
              padding: 2,
            }}>
            <View
              style={{
                backgroundColor: '#2B085E',
                padding: 20,
                borderRadius: 18,
                flex: 1,
              }}>
              <Text style={{color: 'white', fontWeight: 'bold', fontSize: 18}}>
                {name}
              </Text>
              {/* <View style={{marginTop: 10}}>
                {(users.filter((item, idx) => idx < 1) || []).map(
                  (speaker, index) => {
                    return (
                      <View
                        key={'user-icon' + speaker.nickName}
                        style={{
                          flexDirection: 'row',
                          marginBottom: 2,
                          alignItems: 'center',
                        }}>
                        <Text
                          style={{
                            color: 'white',
                            fontSize: 16,
                            marginRight: 10,
                          }}
                          key={index + 'text'}>
                          {speaker.nickName}
                        </Text>
                        <Image
                          style={{width: 16, height: 16}}
                          source={require('../../../assets/home/room_speaker.png')}
                        />
                      </View>
                    );
                  },
                )}
              </View> */}
              <View
                style={{
                  marginTop: 6,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'flex-end',
                }}>
                <LinearGradient
                  start={{x: 0, y: 1}}
                  end={{x: 1, y: 1}}
                  colors={['#CE18EC', '#6601F5']}
                  style={{
                    alignContent: 'center',
                    alignItems: 'center',
                    height: 24,
                    flexDirection: 'row',
                    backgroundColor: '#FFCB26',
                    paddingLeft: 10,
                    paddingRight: 10,
                    borderRadius: 20,
                  }}>
                  <Text style={{color: 'white', fontSize: 12}}>
                    {userAmount}
                  </Text>
                  <Image
                    style={{width: 8, height: 8, marginLeft: 2}}
                    source={require('../../../assets/home/icon_members.png')}
                  />
                  <Text style={{color: 'white', fontSize: 12, marginLeft: 20}}>
                    {speakerAmount}
                  </Text>
                  <Image
                    style={{width: 8, height: 8, marginLeft: 2}}
                    source={require('../../../assets/home/icon_speakers.png')}
                  />
                </LinearGradient>
                <View style={{flexDirection: 'row'}}>
                  {(users.filter((item, idx) => idx < 5) || []).map(
                    (speaker, index) => {
                      return (
                        <CachedImage
                          style={{
                            width: 40,
                            height: 40,
                            borderRadius: 20,
                            marginRight: -10,
                            zIndex: 100 - index,
                          }}
                          key={index + 'img'}
                          source={{uri: BASE_API + speaker.image}}
                        />
                      );
                    },
                  )}
                  <ImageBackground
                    style={{
                      width: 40,
                      height: 40,
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                    source={require('../../../assets/home/speaker_bubble.png')}>
                    <Text
                      style={{fontSize: 10, color: '#fff', marginRight: -6}}>
                      +{userAmount}
                    </Text>
                  </ImageBackground>
                </View>
              </View>
            </View>
          </LinearGradient>
          <View
            style={{
              position: 'absolute',
              right: 50,
              top: 0,
              flexDirection: 'row',
              justifyContent: 'flex-end',
            }}>
            {paid ? (
              <Image
                source={require('../../../assets/home/paid_room.png')}></Image>
            ) : null}
            <Image
              source={
                owner === 99999
                  ? require('../../../assets/home/public_room_tag.png')
                  : require('../../../assets/home/room_tag.png')
              }></Image>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}
